<template>
  <el-dialog
    v-el-drag-dialog
    title="复制本机构安检配置"
    :visible.sync="visible"
    width="600px"
    top="30vh"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" label-position="left" label-width="140px">
      <el-form-item label="请选择要复制的目标">
        <el-select v-model="newOwnerId" style="width: 100%;" placeholder="请选择">
          <el-option
            v-for="(i, ind) in ownersList"
            :key="ind"
            :label="i.targetName"
            :value="i.targetNameId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { checkConfigAll, queryCsmTypeMap } from '@/api'
  import { formatColumnMap } from '@/utils'

  export default {
    name: 'copyadd',
    data() {
      return {
        visible: false,
        ownersList: [],
        entTypeList: [],
        treeVal: {},
        title: '',
        cardList: [
          { title: '随单安检项配置', id: 1 },
          { title: '定期安检项配置', id: 2 },
          { title: '定义安检隐患', id: 3 },
          { title: '安检周期设置', id: 4 }
        ],
        newOwnerId: ''
      }
    },
    async created() {
      await this.getEntType()
    },
    methods: {
      async open(cardVal, treeVal) {
        this.title = cardVal.title
        this.treeVal = treeVal
        const targetId = `${cardVal.value}-${cardVal.id}`
        const res = await checkConfigAll({
          checkType: cardVal.id,
          csmType: cardVal.value,
          orgId: treeVal.orgId
        })
        this.ownersList = res.data.map(item => {
          const targetName = formatColumnMap(this.entTypeList, 'value', item.csmType, 'desc') + formatColumnMap(this.cardList, 'id', item.checkType, 'title')
          const targetNameId = `${item.csmType}-${item.checkType}`
          return { ...item, targetName, targetNameId }
        })
        this.ownersList.map(item => {
          if (item.targetNameId === targetId) {
            this.newOwnerId = item.targetNameId
          }
        })
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 客户类型
      async getEntType() {
        const res = await queryCsmTypeMap()
        this.entTypeList = res.data
      },
      success() {
        const treeVal = this.ownersList.filter(item => item.targetNameId === this.newOwnerId)
        const cardVal = {
          value: treeVal[0].csmType,
          id: treeVal[0].checkType,
          title: this.title
        }
        this.visible = false
        this.$emit('onCopyAdd', cardVal, this.treeVal)
      },
      reset() {
        this.newOwnerId = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-dialog .el-dialog__body {
  padding-top: 20px !important;
}
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 100%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
}
</style>
